<!doctype html>
<html> 
<head> 
<meta charset="utf-8">
<title>Express - NodeJS web开发框架</title> 
<link rel="stylesheet" type="text/css" href="../../css/style.css"/>
<link rel="stylesheet" type="text/css" href="../../css/main.css"/>
<script src="../../js/dialog/artDialog.js?skin=default"></script>
<script src="../../js/dialog/iframeTools.js"></script>

<script>
(function (config) {
    config['lock'] = true;
    config['fixed'] = true;
    config['okVal'] = 'Ok';
    config['cancelVal'] = 'Cancel';
    // [more..]
})(art.dialog.defaults);
</script>


	<script type="text/javascript" src="../../js/scripts/shCore.js"></script>
	<script type="text/javascript" src="../../js/scripts/shBrushCss.js"></script>
	<script type="text/javascript" src="../../js/scripts/shBrushJScript.js"></script>
	<link type="text/css" rel="stylesheet" href="../../js/styles/shCore.css"/>
	<link type="text/css" rel="stylesheet" href="../../js/styles/shThemeDefault.css"/>
	<script type="text/javascript">
		SyntaxHighlighter.config.clipboardSwf = '../../js/scripts/clipboard.swf';
		SyntaxHighlighter.defaults['toolbar'] = true;
		SyntaxHighlighter.all();
	</script>
</head> 
<body> 
<ul id="toc"> 
	<li><a href="#copyright">概述</a></li> 
	<li><a href="#createCanopyPath">画图</a></li> 
	<li><a href="#linellae">基本线条</a></li>
    <li><a href="javascript:history.go(-1);">返回</a></li> 
</ul> 
<div id="wrapper"> 
	<div id="container">
		
		
		<div id="copyright">
			<h1 style="margin-top:0;">canvas 元素用于在网页上绘制图形。</h1>
			<p id="tagline">
			<h3>什么是 Canvas？</h3>
			<p>什么是 HTML5？</p>
				HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。</br>
				画布是一个矩形区域，您可以控制其每一像素。</br>
				canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。</br>
			<p>创建 Canvas 元素</p>
				向 HTML5 页面添加 canvas 元素。</br>
				规定元素的 id、宽度和高度：</br>
	
			</p>
            <pre><code>&lt;canvas id=&quot;myCanvas&quot; width=&quot;200&quot; height=&quot;100&quot;&gt;&lt;/canvas&gt;</code></pre> 
		</div>
     
		<h3 id="createCanopyPath">画图</h3> 
<pre><code><pre class="brush: js;">
<canvas id="diagonal" width="300" height="250" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
function createCanopyPath(context){
	context.beginPath();

	context.moveTo(-25,-50);
	context.lineTo(-10,-80);
	context.lineTo(-20,-80);
	context.lineTo(-5,-110);
	context.lineTo(-15,-110);
	context.lineTo(0,-140);
	context.lineTo(15,-110);
	context.lineTo(5,-110);
	context.lineTo(20,-80);
	context.lineTo(10,-80);
	context.lineTo(25,-50);
	context.closePath();
}

function drawDiagonal(){
var canvas=document.getElementById("diagonal");
var context=canvas.getContext("2d");

//画树冠
context.save();
context.translate(130,250);
createCanopyPath(context);
context.lineWidth=4;
context.lineJoin = 'round';
context.strokeStyle='#00DB00';
context.stroke();
context.restore();

//画矩形
context.fillStyle="#FF0000";
context.beginPath();
context.arc(210,52,15,0,Math.PI*2,true);
context.closePath();
context.fill();

//画圆
context.translate(130,250);
context.clearRect(0,0,10,20);
context.fillStyle="00DB00";
context.fillRect(-5,-50,10,50);

//画曲线
//context.translate(-10,350);
}
window.addEventListener("load",drawDiagonal,true);
</script>
</pre>
<a href="javascript:void(0)" onClick="art.dialog.open('../Canvas/1-6.html',
    {title: '', width: 600, height: 400});">运行代码</a></code></pre> 
    
    
		<h3 id="linellae">基础线条</h3> 
<pre><code>
<pre class="brush: js;">
<canvas id="myCanvas" width="400" height="300" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");

/*
基本线条
上面的例子中展示了绘制矩形是多么简单。
通过 fillStyle 和 strokeStyle 属性可以轻松的设置矩形的填充和线条。颜色值使用方法和 CSS 
一样：十六进制数、rgb()、rgba() 和 hsla()（ 若浏览器支持，如Opera 10 和 Firefox 3)。
通过 fillRect 可以绘制带填充的矩形。使用 strokeRect 可以绘制只有边框没有填充的矩形。
如果想清除部分 canvas 可以使用 clearRect。上述三个方法的参数相同：x, y, width, height。
前两个参数设定 (x,y) 坐标，后两个参数设置矩形的高度和宽度。
可以使用 lineWidth 属性改变线条粗细。
*/
context.fillStyle   = '#00f'; // blue  
context.strokeStyle = '#f00'; // red  
context.lineWidth   = 4; 
   
// Draw some rectangles.  
context.fillRect  (0,   0, 150, 50);  
context.strokeRect(0,  60, 150, 50);  
context.clearRect (30, 25,  90, 60);  
context.strokeRect(30, 25,  90, 60);  

/*
通过 canvas 路径（path）可以绘制任意形状。可以先绘制轮廓，然后绘制边框和填充。
创建自定义形状很简单，使用beginPath()开始绘制，然后使用直线、曲线和
其他图形绘制你的图形。绘制完毕后调用 fill 和 stroke 即可添加填充或者设置边框。
调用 closePath() 结束自定义图形绘制。
*/
// Set the style properties.  
context.fillStyle   = '#00f';  
context.strokeStyle = '#f00';  
context.lineWidth   = 4;  
   
context.beginPath();  
// Start from the top-left point.  
context.moveTo(180, 0); // give the (x,y) coordinates  
context.lineTo(280, 50);  
context.lineTo(180, 100);  
context.lineTo(180, 0);  
   
// Done! Now fill the shape, 和 draw the stroke.  
// Note: your shape will not be visible until you call any of the two methods.  
context.fill();  
context.stroke();  
context.closePath();


</script>


</pre>
	<a href="javascript:void(0)" onClick="art.dialog.open('../Canvas/1-7.html',
    {title: '', width: 600, height: 400});">运行代码</a></code></pre> 
	
		</div> 
	</div> 
    <script type="text/javascript" src="../../js/jquery-1.7.min.js"></script>
	<script type="text/javascript" src="../../js/main.js"></script>
</body> 
</html>